<template>
  <el-row
    ><el-col :span="24">
      <el-dialog
        title="退还操作"
        :visible="status"
        class="dialog"
        @close="guanbi()"
        @open="getData()"
      >
        <el-form :model="tuihuanData" :rules="rules" ref="tuihuanData" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="办案单位" prop="huId">
                <el-select v-model="tuihuanData.huId">
                  <el-option
                    v-for="(item, index) in uhIdList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="物品名称" prop="pName">
                <el-input v-model="tuihuanData.pName" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="物品处置">
                <el-input value="退还当事人" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退还对象姓名" prop="name">
                <el-input v-model="tuihuanData.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="签收照片" class="imgbox" prop="signInImg">
                <image-upload v-model="tuihuanData.signInImg" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-button type="primary" size="medium" @click="updateStatus_tuihuan('tuihuanData')"
                >确认</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </el-col></el-row
  >
</template>
<script>
import { updateInfo, financialInfo } from '@/api/system/financial_treatment'
import { addlist } from '@/api/system/financial_treatment'
import { getUnitListAll } from '@/api/property/unit.js'
export default {
  data() {
    return {
      status: false,
      data: [],
      uhIdList: [],
      tuihuanData: {
        // 处置财物Id
        id: '',
        // 办案单位ID
        huId: null,
        // 物品名称
        pName: null,
        // 退还对象姓名
        name: null,
        //签收照片
        signInImg: null,
        //处置状态
        status: '1'
      },
      rules: {
        huId: [{ required: true, message: '请选择办案单位',  }],
        pName: [{ required: true, message: '请输入物品名称',  }],
        name: [{ required: true, message: '请输入退还对象姓名',  }],
        signInImg: [{ required: true, message: '请导入签收照片',  }]
      },
      pId: []
    }
  },
  methods: {
    updateStatus_tuihuan(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //批量修改处置状态
          updateInfo(this.pId, 1).then((res) => {})

          //批量修改登记状态
          financialInfo(this.pId, 1).then((res) => {})

          // 添加处置数据
          addlist(this.tuihuanData).then((res) => {})

          this.status = false
          for (let key in this.tuihuanData) {
            this.tuihuanData[key] = ''
          }
        } else {
          alert('请填写完整!')
          return false
        }
      })
    },
    guanbi() {
      this.status = false
      for (let key in this.tuihuanData) {
        this.tuihuanData[key] = ''
      }
      this.$emit('genxing')
    },
    getData() {
      this.tuihuanData.pName = this.data.map((item) => item.pName).join(' ')
      this.data.map((item) => {
        this.pId.push(item.pId)
      })
      // 获取办案单位
      getUnitListAll().then((e) => {
        e.data.forEach((res) => {
          this.uhIdList.push({ label: res.name, value: res.id })
        })
      })
    }
  }
}
</script>
